import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {InfoCircleOutlined} from "@ant-design/icons";
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio,Tooltip,Table } from 'antd';
import { formatMessage, FormattedMessage} from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
// import styles from '.././style';

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
  dataList: any
  onSubmit: (fieldsValue: any) => any;
  onCancel: () => void;
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { dataModalVisible, form, onSubmit: handleSubmit, onCancel,
    common, isUpdate,dataFormValues,dataList } = props;

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');

  const [continent,setContinent] = useState<any>('');
  const [nation,setNation] = useState<any>('');

  const actionRef = useRef<ActionType>();

  const columns = [
    {
        title: formatMessage({id: 'multiple-languages'}),
        dataIndex: 'name',
    },
    {
        title: formatMessage({id: 'menu-path'}),
        dataIndex: 'path',
    },
  ];
  const modalData = [
    {
      name:'站点名称',
      path:'系统 > 站点设置',
    },
    {
      name:'站点介绍',
      path:'系统 > 站点设置',
    },
    {
      name:'关站时提示语',
      path:'系统 > 站点设置',
    },
    {
      name:'验证码模板',
      path:'系统 > 发信设置 > 验证码设置 > 配置模板',
    },
    {
      name:'服务条款',
      path:'系统 > 账号设置',
    },
    {
      name:'隐私权政策',
      path:'系统 > 账号设置',
    },
    {
      name:'钱包支付扩展名称',
      path:'系统 > 钱包设置 > 支付服务商 > 显示名称',
    },
    {
      name:'钱包提现扩展名称',
      path:'系统 > 钱包设置 > 提现支持渠道 > 显示名称',
    },
    {
      name:'命名配置',
      path:'运营 > 命名配置',
    },
    {
      name:'表情包名称',
      path:'运营 > 表情配置 > 表情小组名',
    },
    {
      name:'发表帖子限制提示',
      path:'运营 > 发表配置 > 发表帖子 > 发表评论开放时间 > 限制提示',
    },
    {
      name:'发表评论限制提示',
      path:'运营 > 发表配置 > 发表评论 > 发表评论开放时间 > 限制提示',
    },
    {
      name:'用户角色名',
      path:'运营 > 用户角色 > 角色名',
    },
    {
      name:'内容小组名称',
      path:'运营 > 内容小组 > 小组名称',
    },
    {
      name:'内容小组描述',
      path:'运营 > 内容小组 > 小组描述',
    },
    {
      name:'编辑器扩展名称',
      path:'运营 > 扩展管理 > 编辑器扩展 > 显示名称',
    },
    {
      name:'搜索类型扩展名称',
      path:'运营 > 扩展管理 > 搜索类型扩展 > 显示名称',
    },
    {
      name:'管理扩展名称',
      path:'运营 > 扩展管理 > 管理扩展 > 显示名称',
    },
    {
      name:'小组扩展名称',
      path:'运营 > 扩展管理 > 小组扩展 > 显示名称',
    },
    {
      name:'用户功能扩展名称',
      path:'运营 > 扩展管理 > 用户功能扩展 > 显示名称',
    },
    {
      name:'用户资料扩展名称',
      path:'运营 > 扩展管理 > 用户资料扩展 > 显示名称',
    },
    {
      name:'菜单导航名称',
      path:'主题 > 菜单设置 > 导航名称',
    },
    {
      name:'菜单 SEO 标题',
      path:'主题 > 菜单设置 > SEO 标题',
    },
    {
      name:'菜单 SEO 描述',
      path:'主题 > 菜单设置 > SEO 描述',
    },
  ]

  //提交表单
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      
      // 如果是更新
      // if(isUpdate){
      //   fieldsValue.id = dataFormValues.id;
      // }
      //查重
      if(cancelRepet(continent,nation)) return; 
      
      console.log("submit fields ", fieldsValue)
      var areaName = '';
      var langName = '';
      var writingDirection = '';
      if(common.languageOption && common.languageOption.length>0){
        common.languageOption.map((item:any,index:any)=>{
          if(item.code == fieldsValue.langCode){
            langName = item.localName;
            writingDirection = item.writingDirection;
          }
        })
      }
      if(common.areasOption && common.areasOption.length>0){
        common.areasOption.map((item:any,index:any)=>{
          if(item.code == nation){
            areaName = item.localName;
          }
        })
      }
      
      var submitValue = {
        'rankNum': fieldsValue.rankNum,
        'langCode': fieldsValue.langCode,
        'langName': langName,
        'writingDirection': writingDirection,
        'language_status': fieldsValue.language_status,
        'continents': continent || dataFormValues?.continents,
        'areaName': areaName || dataFormValues?.areaName,
        'areaCode': nation || dataFormValues?.areaCode ,
        'dateFormat': fieldsValue.dateFormat,
        'timeFormatMinute': fieldsValue.timeFormatMinute,
        'timeFormatHour': fieldsValue.timeFormatHour,
        'timeFormatDay': fieldsValue.timeFormatDay,
        'timeFormatMonth': fieldsValue.timeFormatMonth,
      }
      if(isUpdate){
        submitValue.key = dataFormValues.key;
      }

      // 如果更新成功之后，重置表单
      handleSubmit(submitValue);

    });
  };

  //地区去重校验
  const cancelRepet = (con:any,nation:any)=>{
    var isRepet = false;
    if(dataList.length > 0){
      dataList.map((item:any,index:any)=>{
        if(con == item.continent && nation == item.nation){
          isRepet = true;
        }
      })

    }
    return isRepet
  }

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    setUploadChanged(true)
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      setPicture([])
    }
  }

  const getTableData = (params:any) => {
      const listData = {
        data: modalData
      }
      return listData
  }

  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(dataFormValues.file_url)

  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)

  // 弹出框
  // @ts-ignore
  return <Modal
    destroyOnClose
    title={formatMessage({id: 'helptext'})}
    width={"40%"}
    visible={dataModalVisible}
    onOk={okHandle}
    onCancel={() => onCancel()}
    footer={false}
  >
      <Table
        pagination={{
          pageSize: 10,
        }}
        // request={params => getTableData(params)}
        dataSource={modalData}
        columns={columns}
      />
    
    
  </Modal>;
};

export default Form.create<DataFormProps>()(DataForm);
